'use strict';
import React, { useState, useEffect, useRef } from 'react';
import { Form, Checkbox } from 'antd';
import { layout } from '../conf';
import styles from './index.less';

/*
* 组件注释
* create by wuqiong
* creation time 2022/04/26
* 任务
* */

const getOption = (isShow) => {
  return isShow
    ? [
      { label: '异步前', value: 'asyncBefore' },
      { label: '异步后', value: 'asyncAfter' },
      { label: '排除', value: 'exclusive' }
    ]
    : [
      { label: '异步前', value: 'asyncBefore' },
      { label: '异步后', value: 'asyncAfter' },
    ]
}
const Index = (props) => {
  const { id, type } = props;
  const [isShow, setIsShow] = useState(false);
  const [form] = Form.useForm();

  const [taskConfigForm, setTaskConfigForm] = useState([]);
  const [witchTaskComponent, setWitchTaskComponent] = useState("");
  const [installedComponent] = useState({
    // 手工任务与普通任务一致，不需要其他配置
    // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
    // 发送任务、服务任务、业务规则任务共用一个相同配置
    UserTask: "UserTask", // 用户任务配置
    ScriptTask: "ScriptTask", // 脚本任务配置
    ReceiveTask: "ReceiveTask" // 消息接收任务
  });
  const dataRef = useRef({});

  const changeTaskAsync = (checkedValue) => {
    let asyncAttr = { asyncAfter: false, asyncBefore: false, exclusive: false };

    if (checkedValue.includes("asyncBefore") || checkedValue.includes("asyncAfter")) {
      checkedValue.map(item => asyncAttr[item] = true);
    }

    window.bpmnInstances.modeling.updateProperties(dataRef.current.bpmnElement, { ...asyncAttr });
    setIsShow(checkedValue.includes("asyncBefore") || checkedValue.includes("asyncAfter"))
  }

  useEffect(() => {
    dataRef.current.bpmnElement = window.bpmnInstances.bpmnElement;
    let asyncArr = [];
    ["asyncAfter", "asyncBefore", "exclusive"].map(item => dataRef.current.bpmnElement?.businessObject?.[item] && asyncArr.push(item))

    setTaskConfigForm(asyncArr)
  }, [id])

  useEffect(() => setWitchTaskComponent(installedComponent[type]), [type])

  return <div className={styles.task}>
    <Form {...layout} form={form} initialValues={taskConfigForm} name="task_form">
      <Form.Item name="async" label="异步状态" style={{ height: "32px", lineHeight: "32px" }}>
        <Checkbox.Group options={getOption(isShow)} onChange={changeTaskAsync} />
      </Form.Item>


    </Form>

  </div>
};
export default Index;